/**
 * @Author:高志斐
 * @Date:2020/7/16
 * @Description:这是调仓详情页面
 */
import React,{Component} from "react";
import {Button, Icon, NavBar, WhiteSpace, List, Modal, Toast} from "antd-mobile";
import axios from 'axios';
import {URL} from "../../index";
import {color} from "echarts/src/export";
import {getCookieId} from "../Login/Component_Login/GetCookie";
const Item = List.Item;
const Brief = Item.Brief;
const alert = Modal.alert;
const entrustStatus=['委托失败','处理中','委托成功','委托撤单']
const adjustStates=["赎回确认中","申购确认中","申购成功","撤单成功","赎回成功"]
function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    while (el) {
        if (matchesSelector.call(el, selector)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}
//时间格式转换
function myFunction(datetime){

    var item = new Date(datetime).toJSON();

    var date = new Date(+new Date(item)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')

    console.log("时间==="+date);
    return date;
}
export default class ChangeListDetail extends Component{
    constructor(props) {
        super(props);
        const adjustId = this.props.location.state.adjustId;
        this.state = {
            entrusts:[],//委托列表
            disabled: false,
            adjustId:adjustId,//调仓记录id
            logicId:"",//订单编号
            adjustStatus:"",//调仓状态
            creatTime:"",//创建时间
            modifyTime:"",//修改时间
            comBaseName:"",//组合名称
            modal1:false,
            modal2:false,
            modal3:false,
        }
        this.loadData=this.loadData.bind(this)
    }

    //加载数据
    loadData(){
        axios({
            method:"GET",
            url:URL + "/transaction/adjustmentRecord",
            params:{adjustId: this.state.adjustId}
        }).then(res=>{
            if (res.data.code===200){
                this.setState({
                    entrusts:this.state.entrusts.concat(res.data.entrustList),
                    logicId:res.data.adjustmentRecord.logicId,
                    adjustStatus:adjustStates[res.data.adjustmentRecord.adjustStatus],
                    creatTime:myFunction(res.data.adjustmentRecord.gmtCreate),
                    modifyTime:myFunction(res.data.adjustmentRecord.gmtModified),
                    comBaseName:res.data.comBaseName,
                })
            }else{
                console.log(res.data)
            }
        }).catch(error =>{
            console.log(error)
        })
    }
    //弹出提示框
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    //关闭提示框
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    onWrapTouchStart = (e) => {
        // fix touch to scroll background page on iOS
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
            return;
        }
        const pNode = closest(e.target, '.am-modal-content');
        if (!pNode) {
            e.preventDefault();
        }
    }

    componentDidMount() {
        this.loadData()
    }
    render() {
        return(
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" style={{color:"#f8a83f"}}/>}
                    onLeftClick={
                        // ()=> {this.props.history.push('/transactionRecord')}
                        ()=> {window.history.back(-1)}
                    }
                >{this.state.comBaseName+"调仓详情"}
                </NavBar>
                <div className='transactionDetail-div' >
                    <span style={{color:'#9f9f9f'}}>订单编号</span>&nbsp;&nbsp;<span>{this.state.logicId}</span>
                </div>
                <div className='transactionDetail-div' style={{backgroundColor:"white"}}>
                    <span style={{color:'#9f9f9f'}}>调仓状态</span>&nbsp;&nbsp;<span>{this.state.adjustStatus}</span>
                </div>
                <div className='transactionDetail-div' >
                    <span style={{color:'#9f9f9f'}}>创建时间</span>&nbsp;&nbsp;<span>{this.state.creatTime}</span>
                </div>
                <div className='transactionDetail-div' style={{backgroundColor:"white"}}>
                    <span style={{color:'#9f9f9f'}}>修改时间</span>&nbsp;&nbsp;<span>{this.state.modifyTime}</span>
                </div>

                <List renderHeader={() => '委托列表'} className="my-list">
                    {(()=>{return this.state.entrusts.map((item,index)=>{
                        return(
                            <Item multipleLine extra={item.entrustAmount+' 元'}>
                                {item.proName}&nbsp;({item.proTsCode}) <Brief>{entrustStatus[item.entrustStatus]}</Brief>
                            </Item>
                        )
                    })
                    })()}
                </List>
                <WhiteSpace/>

            </div>
        );
    }
}
